<template>
  <div class="echarts-box">
    <div ref="myLineChartsRef" :style="{ width: width + 'px', height: height + 'px' }"></div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
withDefaults(defineProps<{ width: number | string; height: number | string }>(), {
  width: 400,
  height: 400,
});
let myEcharts: echarts.ECharts | undefined;
const option: echarts.EChartsOption = {
  // tooltip: {
  //   trigger: 'item',
  // },
  // legend: {
  //   top: 'center',
  //   right: '5%',
  //   orient: 'vertical',
  //   textStyle: {
  //     color: '#fff',
  //   },
  // },

  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },

  xAxis: {
    type: 'category',
    data: [],
  },
  yAxis: {
    type: 'value',
    splitLine: {
      lineStyle: {
        color: '#323232',
      },
    },
  },
  series: [
    {
      data: [],
      type: 'line',
      smooth: true,
    },
  ],
};
const myLineChartsRef = ref();
const initChart = () => {
  if (myLineChartsRef.value) {
    myEcharts = echarts.init(myLineChartsRef.value);
  }
};
const setOptions = (options: echarts.EChartsOption) => {
  if (myEcharts) {
    console.log('myEcharts:', myEcharts);

    //  option.series = options.series;
    // console.log('data:', option);

    myEcharts.setOption(options);
    // } else {
    //   initChart();
    //   myEcharts?.setOptions({
    //     ...option,
    //     ...options,
    //   });
  }
};
const getOptions = (): echarts.EChartsOption => {
  return option;
};
defineExpose({
  setOptions,
  getOptions,
});
onMounted(() => {
  initChart();
});
onUnmounted(() => {
  myEcharts?.dispose();
});
</script>
<style lang="scss" scoped></style>
